import React, { useState } from 'react';
import { Button, InputComponent, Dropdown } from '../../../componet/index';
import './report.scss';
import { Space, Table, Tag } from 'antd';
const { Column } = Table;


interface DataType {
  key: React.Key;
  reportname: string;
  organization: string;
  title: string;
  date: string;
}

const data: DataType[] = [
  {
    key: '1',
    reportname: 'John',
    organization: 'Brown',
    title: 'New York No. 1 Lake Park',
    date: '2022-01-01',
  },
  {
    key: '2',
    reportname: 'Jim',
    organization: 'Green',
    title: 'London No. 1 Lake Park',
    date: '2022-01-01',
  },
  {
    key: '3',
    reportname: 'Joe',
    organization: 'Black',
    title: 'Sydney No. 1 Lake Park',
    date: '2022-01-01',
  },
];

const rowSelection = {
  onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  // getCheckboxProps: (record: DataType) => ({
  //   disabled: record.name === 'Disabled User', // Only 'Disabled User' is disabled
  // }),
};
export default function Report() { // Renamed to "Report"
  const [inputValue, setInputValue] = useState<string>('');  // 搜索input框的值
  const [show, setShow] = useState<boolean>(true); // 控制搜索框的显示与隐藏
  const [show1, setShow1] = useState<boolean>(true);
  const [seletValue, setSelectValue] = useState(''); // 下拉框的值
  const [record, setRecord] = useState<string>(''); // 表格数据
  interface DropdownOption {
    label: string;
    value: any;
  }
  const options: DropdownOption[] = [
    { label: 'Option 1', value: '1' },
    { label: 'Option 2', value: '2' },
    { label: 'Option 3', value: '3' },
  ];
  // 获取input框信息
  const handleInputChange = (value: string) => {
    setInputValue(value);
   
  };

  // 批量下载
  const handleButtonClick1 = () => {
    
  };

  // 下拉
  const handleDropdownChange = (value: any) => {
    setSelectValue(value);
  };

  // 查询
  const handleButtonClick3 = () => {
    // get请求birthdaysearch接口，将inputValue作为参数传递
    // axios.get('/birthdaysearch',{params:{name:inputValue}}).then((response) => {
    //   setDataSource(response.data.list)
    // })
  };

  // 重置
  const handleButtonClick4 = () => {
    setInputValue('');
    setSelectValue('');
  };
  // 查看
  const handleButtonClick5 = (record1: any) => {
    // 处理点击事件的逻辑
    // console.log(record1);
    setShow(!show);
    setRecord(record1);
  };
  // 删除
  const handleButtonClick6 = (record: object) => {
    console.log(record);

  };
  // 返回
  const handleButtonClick7 = () => {
    setShow(!show);
  };

  return (
    <div className='report'>
      {
        show?(
          <div>
        <div className='report__title'>
          <Button text="批量下载" setColor='white' onClick={handleButtonClick1} />
          &nbsp;&nbsp;
          <span>汇报人</span> &nbsp;
          <InputComponent
            value={inputValue}
            onChange={handleInputChange}
            className="custom"
            placeholder="请输入搜索内容"
          />
          <span>组织</span>
          <Dropdown options={options} placeholder='请选择' value={seletValue} onChange={handleDropdownChange} className={"select"} />
          <Button text="查询" setBackgroundColor='red' setColor='white' onClick={handleButtonClick3} />
          <Button text="重置" setBackgroundColor='white' onClick={handleButtonClick4} />
        </div>

        <Table dataSource={data}
          rowSelection={{
            type: 'checkbox', // Always use checkbox for selection
            ...rowSelection,
          }}
          >
              <Column title="汇报人" dataIndex="reportname" key="reportname" align='center'/>
              <Column title="组织" dataIndex="organization" key="organization" align='center'/>
            <Column title="标题" dataIndex="title" key="title" align='center' />
            <Column title="时间" dataIndex="date" key="date" align='center'/>
            <Column
            align='center'
              title="操作"
              key="action"
              render={(_: any, record: DataType) => (
                <Space size="middle">
                  <a onClick={() => handleButtonClick5(record)}>查看</a>
                  <a onClick={() => handleButtonClick6(record)}>删除</a>
                </Space>
              )}
            />
          </Table>
      </div>
        ):(
          <div>
            <h5 style={{borderBottom: '1px solid #ccc',paddingBottom: '10px',marginBottom: '25px'}}>
              <span style={{color: 'red',fontSize:'20px'}}> | </span>查看汇报
            </h5>
             {/* 文案模版 */}
             <div style={{marginLeft: '35px'}}>
                <div style={{display: 'flex',marginLeft: '15px'}}>
                  <span style={{marginBottom:'20px'}}>汇报人： </span>
                  <span style={{marginBottom:'20px'}}> 张三</span>
                </div>
                <div style={{display: 'flex',marginLeft: '30px'}}>
                  <span style={{marginBottom:'20px'}}>组织：</span>
                  <span style={{marginBottom:'20px'}}> A</span>
                </div>
                <div style={{display: 'flex',marginLeft: '30px'}}>
                  <span style={{marginBottom:'20px'}}>标题：</span>
                  <span style={{marginBottom:'20px'}}> A标题</span>
                </div>

                  <div style={{display: 'flex'}}>
                    <span style={{marginBottom:'90px'}}>汇报内容：</span>
                    <div style={{border: '1px solid #ccc',padding: '5px 10px 20px 10px',margin: '0 0 15px 0',maxWidth: '400px',display: 'inline-block'}}>
                      今天是您的政治生日!  在您光荣加入了中国共产党。在这神圣的日子里，向您致以节日的问候!希望您时刻牢记自己是一名共产党员，增强党员意识，不负党的重任，践行入党誓词，永葆共产党员的先进本色。
                      祝您身体健康，生活愉快!
                    </div>
                </div>
                <div style={{display: 'flex',marginLeft: '15px'}}>
                  <span style={{marginBottom:'20px'}}>接收人：</span>
                  <span style={{marginBottom:'20px'}}> 张三、李四、王五</span>
                </div>
                <div style={{display: 'flex'}}>
                  <span style={{marginBottom:'20px'}}>汇报时间：</span>
                  <span style={{marginBottom:'20px'}}> 2024-03-05</span>
                </div>
                  
              </div>
            <div style={{  
                width: '83%',
                height: '50px',
                boxShadow: '0 -4px 8px rgba(0, 0, 0, 0.3)',
                paddingTop: '3px',
                position: 'fixed',
                bottom: '0',
                right:'2px',  
                textAlign: 'center',
                backgroundColor: 'white',
                }}>
                <Button text="返回" setColor='red' setBackgroundColor='white' onClick={handleButtonClick7} /> 
            </div>
          </div>
        )
      }
      
      
      
    </div>
  );
}
